<template>
    <div>
        <h2>优惠卷列表</h2>
        <div>
            <span>门店名称:</span>

            <select v-model="model.ShopName">
                <option value="-1">请选择门店</option>
                <option value="昌平大酒店">昌平大酒店</option>
                <option value="顺义大酒店">顺义大酒店</option>
                <option value="温泉大酒店">温泉大酒店</option>
                <option value="上帝大酒店">上帝大酒店</option>
            </select>
            <span>标题:</span>
            <input type="text" v-model="model.Titel">
            <input type="button" value="查询" @click="GetList()" class="btn btn-success">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>门店名称</td>
                    <td>优惠卷类型</td>
                    <td>标题</td>
                    <td>图片</td>
                    <td>服务</td>
                    <td>优惠卷开始时间</td>
                    <td>优惠价数量</td>
                    <td>限领张数</td>
                    <td>减免金额</td>
                    <td>折扣</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.Type }}</td>
                    <td>{{ item.Titel }}</td>
                    <td><img :src="item.Photo" alt="" width="100" height="100"></td>
                    <td>{{ item.FuWu }}</td>
                    <td>{{ item.BeginTime.substring(0, 10) }}到{{ item.EedTime.substring(0, 10) }}</td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.Number }}</td>
                    <td>{{ item.ReleaseMoney }}</td>
                    <td>{{ item.ZheKou }}</td>
                    <td>
                        <input type="button" value="编辑" class=" btn btn-info" @click="edit(item.Id)">
                        <input type="button" value="删除" class=" btn btn-danger" @click="editdel(item.Id)">
                    </td>
                </tr>


            </tbody>
        </table>
        <span>总条数:{{ data.count }}</span>
        <span>每页:{{ model.size }}条</span>
        <span>当前:{{ model.index + '/' + data.page }}条</span>
    </div>

    <div>
        <input type="button" value="首页" class="btn btn-info" @click="getpage('a')" >
        <input type="button" value="上一页" class="btn btn-info" @click="getpage('b')">
        <input type="button" value="下一页" class="btn btn-info" @click="getpage('c')">
        <input type="button" value="尾页" class="btn btn-info" @click="getpage('d')">
    </div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();


//定义变量
let model = reactive({
    ShopName: '-1',
    Titel: '',
    index: 1,
    size: 3,
})


//定义分页变量
let data = reactive({
    list: [],
    count: 0,
    page: 0,
})

onMounted(() => {
    GetList();
})

const GetList = () => {
    axios({
        url: 'https://localhost:7276/api/DisCount/DisCountList',
        method: 'get',
        params: model,
    })

        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;

        })


        .catch((ree) => {
            console.log(ree);
        })


}



//编辑
const edit = (Id: any) => {

    router.push({
        path: '/DisCountUpd',
        query: { Id: Id },



    })
}



//删除
const editdel = (Id: any) => {

    var f = confirm('确定要删除吗？');
    if (f) {

        axios({
            url: 'https://localhost:7276/api/DisCount/DisCountDel',
            method: 'delete',
            params: { Id: Id },
        })

            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功');
                    GetList();
                } else {
                    alert('删除失败');
                }

            })
            .catch((ree) => {
                console.log(ree);
            })
    }

}



//分页
const getpage = (str: any) => {

    switch (str) {

        //首页
        case 'a':
            if (model.index == 1) {
                return;
            }
            model.index = 1;
            break;

        //上一页
        case 'b':
            if (model.index == 1 && data.page) {
                return;

            }
            model.index--;
            break;


        //下一啊实打实大叔大婶撒大大阿达的页
        case 'c':
            if (model.index == data.page) {
                return;

            }
            model.index++;

            break;


        //尾页
        case 'd':

            if (model.index == data.page) {
                return;

            }
            model.index = data.page
            break;


    }
    GetList();

}
</script>

<style scoped></style>